@charset 'utf-8';

@import 'reset';

html,body,.web{
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.web{
    position: relative;
    img{
        width: 100%;
        height: 100%;
    }
}

.title{
    width: r(589px);
    height: r(166px);
    position: absolute;
    left: 50%;
    top: 13.8%;
    margin-left: r(-294.5px);
    animation: slideDown 1000ms ease-in-out 800ms forwards;
    img{
        width: 100%;
    }
}

@keyframes slideDown{
    from{
        transform: translateY(r(-246px));
    }
    
    to{
        transform: translateY(13.8%);
    }
}

.bear{
    width: r(315px);
    height: r(406px);
    position: absolute;
    left: 50%;
    margin-left: r(-157.5px);
    top: 28.3%;
    animation: beBigger 800ms ease-in-out 0s;
    >img{
        width: 100%;
    }
   
}

@keyframes beBigger{
    from{
        transform: scale(0.3);
    }
    
    to{
        transform: scale(1);
    }
}

.plane{
    width: r(135px);
    height: r(122px);
    position: absolute;
    left: r(-135px);
    top: 41.5%;
    animation: fly 1600ms ease-out 0ms forwards;
    >img{
        width: 100%;
        height: 100%;
    }
}

@keyframes fly{
    from{
        transform: translateX(r(-135px));
    }
    
    to{
        transform: translateX(r(224px));
    }
}
    

.money-left,.money-right{
    width: r(147px);
    height: r(238px);
    position: absolute;
    animation: shine 4000ms ease-in-out 500ms alternate infinite;
    img{
        width: 100%;
        height: auto;
    }
}

@keyframes shine{
    0%{
        opacity: 1;
    }
    50%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}


.money-left{
    left: 0;
    top: 58%;
}

.money-right{
    right: 0;
    top: 45%;
}

.solgan{
    width: r(389px);
    height: gr(76px);
    position: absolute;
    color: white;
    text-align: center;
    left: 50%;
    margin-left: r(-194.5px);
    top: 71.3%;
    p:first-of-type{
        font-size: r(22px);
    }
    p:last-of-type{
        font-size: r(28px);
    }
}

footer{
    width: r(466px);
    height: r(66px);
    position: absolute;
    left: 50%;
    top: 80.7%;
    margin-left: r(-233px);
    .game-rules{
        width: r(227px);
        height: r(66px);
        float: left;
        img{
            width: 100%;
        }
    }   
    .join-game{
        width: r(227px);
        height: r(66px);
        float: right;
        img{
            width: 100%;
        }
    } 
}


.official-account-mask{
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,.7);
    z-index: 10;
    display: none;
    .official-account{
        width: r(555px);
        height: r(886px);
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        >img{
            width: 100%;
            height: 100%;
        }
        .qr-code{
            width: r(340px);
            height: r(340px);
            position: absolute;
            left: 50%;
            top: 25.2%;
            margin-left: r(-170px);
            img{
                width: 100%;
            }
        }
        p{
            width: r(456px);
            line-height: r(32px);
            position: absolute;
            left: 50%;
            top: 68.6%;
            margin-left: r(-228px);
            text-align: center;
            font-size: r(21px);
            color: white;
        }
        
        .close-btn{
            width: r(228px);
            height: r(65px);
            position: absolute;
            left: 50%;
            top: r(737px);
            margin-left: r(-114px);
            img{
                width: 100%;
                height: 100%;
            }
        }
    }
}


.game-rules-mask{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,.7);
    overflow-y: scroll;
    display: none;
    .img-wrap{
        width: r(555px);
        height: r(1901px);
        margin: 0 auto;
        >img{
            width: 100%;
            height: 100%;
        }
        .close-rules-btn{
            width: r(37px);
            height: r(35px);
            position: absolute;
            right: 16.8%;
            top: 3%;
            >img{
                width: 100%;
                height: 100%;
            }
        }
    }
}

.select-pillows-page{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    z-index: -1;
    >img{
        width: 100%;
        height: 100%;
    }
    span{
        display: inline-block;
        height: r(42px);
        position: absolute;  
        top: 20%;
        font-size: r(20px);
        color: white;
        text-align: center;
        line-height: r(42px);
        z-index: 10;
    }
    .prev{
        left: r(60px);
    }
    .next{
        right: r(60px);
    }
    .pillows{
        position: absolute; 
        left: 0;
        top: r(100px);
        width: r(640px);
        height: r(640px);
        background: url(../img/index/banner.png) 0 0 no-repeat;
        background-size: cover;
        z-index: 5;
        .watch-port{
            width: r(323px);
            height: r(281px);
            overflow: hidden;
            position: absolute;
            top: 40%;
            left: 50%;
            margin-left: r(-161.5px);
        }
        ul{
            width: r(1292px);
            height: r(181px);
            position: absolute;
            left: 0;
            transition: all .3s ease-in-out .1s ;
            li{
                width: r(323px);
                height: r(181px);
                float: left;
                position: relative;
                >img{
                    width: 100%;
                    height: 100%;
                }
                p{
                    width: r(231px);
                    font-size: r(26px);
                    text-align: center;
                    color: white;
                    position: absolute;
                    left: 50%;
                    margin-left: r(-115.5px);
                    bottom: r(-70px);
                }
            }
        }
    }
}

.select-tips{
    width: r(400px);
    font-size: r(20px);
    position: absolute;
    left: 50%;
    bottom: 17%;
    margin-left: r(-200px);
    color: white;
}

.btn-group{
    width: r(490px);
    height: r(64px);
    position: absolute;
    left: 50%;
    bottom: 8%;
    margin-left: r(-240px);
    >a{
        display: inline-block;
        font-size: r(26px);
        color: #f4e398;
        width: r(229px);
        height: r(64px);
        border: r(3px) solid #f4e398;
        text-align: center;
        line-height: r(64px);
    }
    .back{
        float: left;
    }
    .sure-select{
        float: right;
    }
}



